<template>
  <div class="mxgjEchart-item1" ref="mxgjEchart"></div>
</template>
<script>
const echarts = require("echarts");
export default {
  data() {
    return {
    
    };
  },
  methods: {
    initCharts() {

      let myChart = echarts.init(this.$refs.mxgjEchart);
      // 绘制图表
      myChart.setOption({
       title: {text: '政策热搜词点击量（只显示前五）'},
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false, //显示内容，
        },
        // 数据集
        dataset: {
          source: [
            [
              "product",
              "2022-12-23",
              "2023-01-24",
              "2023-02-25",
              "2023-03-26",
              "2023-03-27",
              "2023-03-28",
            ],
            ["精准扶贫", 10, 2, 69, 38, 3, 20],
            ["新能源", 21, 84, 64, 40, 32, 76],
            ["企业扶持政策", 40, 50, 85, 62, 88, 46],
            ["数据安全", 31, 28, 85, 55, 41, 70],
            ["乡村振兴", 69, 24, 7, 45, 38, 55],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {
          gridIndex: 0,
          type: "value",
          name: "点击量(万次)",
        },
        grid: { top: "55%", left: "20%" },
        series: [
          {
            type: "line",
            smooth: true, // 是否显示平滑曲线
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }, // 鼠标放上去聚焦当前高亮折线数据
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: ["30%", "35%"],
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2021-11} ({d}%)", // b是数据名称，d是百分比
            },
            encode: {
              itemName: "product",
              value: "2021-11",
              tooltip: "2021-11",
            },
          },
        ],
      });
      // 鼠标放到折线上的拐点，饼图跟着变化
      myChart.on("updateAxisPointer", (params) => {
        console.log("params", params);
        const axesInfo = params.axesInfo[0];
        if (axesInfo) {
          const value = axesInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + value + "]} ({d}%)",
              },
              encode: {
                value: value,
                tooltip: value,
              },
            },
          });
        }
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.initCharts();
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.mxgjEchart-item1 {
  width: 1000px;
  height: 700px;
}
</style>